<template>
  <div class="order_box">
    <van-nav-bar title="订单" />
    <van-tabs v-model="active" animated>
      <van-tab v-for="item in orderTips" :title="item.name" :key="item.id">
        <div>
          <!-- 全部订单 -->
          <div v-if="item.id === 1">
            <div v-for="order in orderList" :key="order.orderId">
              <van-collapse v-model="activeNames">
                <van-collapse-item :name="order.orderId">
                  <template #title>
                    <div>
                      {{ order.name }}
                      <van-tag :type="order.status === '待付款' ? 'success' : 'danger'">
                        {{ order.status }}
                      </van-tag>
                    </div>
                  </template>
                  <!-- 订单内容 -->
                  <div v-for="product in order.products" :key="product.id">
                    <van-card
                      :num="product.num"
                      :price="product.price"
                      :desc="product.description"
                      :title="product.name"
                      :thumb="product.imgUrl || placeholderImg"
                    />
                  </div>
                  <div class="total-price">￥{{ order.totalPrice / 100 }}</div>
                  <van-button
                    v-if="order.status === '待付款'"
                    type="primary"
                    block
                  >
                    去付款
                  </van-button>
                </van-collapse-item>
              </van-collapse>
            </div>
          </div>

          <!-- 待付款 -->
          <div v-if="item.id === 2">
            <div v-if="pendingOrders.length === 0" class="empty-state">
              暂无待付款订单
            </div>
            <div v-else>
              <div v-for="order in pendingOrders" :key="order.orderId">
                <van-collapse v-model="activeNames">
                  <van-collapse-item :name="order.orderId">
                    <template #title>
                      <div>
                        {{ order.name }}
                        <van-tag type="success">待付款</van-tag>
                      </div>
                    </template>
                    <!-- 订单内容 -->
                    <div v-for="product in order.products" :key="product.id">
                      <van-card
                        :num="product.num"
                        :price="product.price"
                        :desc="product.description"
                        :title="product.name"
                        :thumb="product.imgUrl || placeholderImg"
                      />
                    </div>
                    <div class="total-price">￥{{ order.totalPrice / 100 }}</div>
                    <van-button type="primary" block>去付款</van-button>
                  </van-collapse-item>
                </van-collapse>
              </div>
            </div>
          </div>

          <!-- 待服务 -->
          <div v-if="item.id === 3">
            <div v-if="serviceOrders.length === 0" class="empty-state">
              暂无待服务订单
            </div>
            <div v-else>
              <div v-for="order in serviceOrders" :key="order.orderId">
                <van-collapse v-model="activeNames">
                  <van-collapse-item :name="order.orderId">
                    <template #title>
                      <div>
                        {{ order.name }}
                        <van-tag type="danger">待服务</van-tag>
                      </div>
                    </template>
                    <!-- 订单内容 -->
                    <div v-for="product in order.products" :key="product.id">
                      <van-card
                        :num="product.num"
                        :price="product.price"
                        :desc="product.description"
                        :title="product.name"
                        :thumb="product.imgUrl || placeholderImg"
                      />
                    </div>
                    <div class="total-price">￥{{ order.totalPrice / 100 }}</div>
                    <van-button type="primary" block>查看服务详情</van-button>
                  </van-collapse-item>
                </van-collapse>
              </div>
            </div>
          </div>

          <!-- 已完成 -->
          <div v-if="item.id === 4">
            <div v-if="completedOrders.length === 0" class="empty-state">
              暂无已完成订单
            </div>
            <div v-else>
              <div v-for="order in completedOrders" :key="order.orderId">
                <van-collapse v-model="activeNames">
                  <van-collapse-item :name="order.orderId">
                    <template #title>
                      <div>
                        {{ order.name }}
                        <van-tag type="info">已完成</van-tag>
                      </div>
                    </template>
                    <!-- 订单内容 -->
                    <div v-for="product in order.products" :key="product.id">
                      <van-card
                        :num="product.num"
                        :price="product.price"
                        :desc="product.description"
                        :title="product.name"
                        :thumb="product.imgUrl || placeholderImg"
                      />
                    </div>
                    <div class="total-price">￥{{ order.totalPrice / 100 }}</div>
                    <van-button type="primary" block>查看评价</van-button>
                  </van-collapse-item>
                </van-collapse>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 底部导航 -->
    <van-tabbar v-model="activeTabbar">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="orders-o">订单</van-tabbar-item>
      <van-tabbar-item icon="info-o">帮助</van-tabbar-item>
      <van-tabbar-item icon="contact">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      activeNames: ["1"],
      activeTabbar: 1,
      placeholderImg: "https://via.placeholder.com/100x100", // 占位符图片
      orderTips: [
        { id: 1, name: "全部订单" },
        { id: 2, name: "待付款" },
        { id: 3, name: "待服务" },
        { id: 4, name: "已完成" }
      ],
      orderList: [
        {
          orderId: 1,
          name: "订单1",
          createTime: "2025-03-25 11:37:08",
          status: "待付款",
          totalPrice: 20000, // 单位为分
          products: [
            {
              id: 1,
              name: "产品1",
              num: 1,
              price: 10000, // 单位为分
              description: "产品描述...包含了什么项目..",
              imgUrl: "https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280"
            },
            {
              id: 2,
              name: "产品2",
              num: 1,
              price: 10000, // 单位为分
              description: "产品描述...包含了什么项目..",
              imgUrl: "https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280"
            }
          ]
        },
        {
          orderId: 2,
          name: "订单2",
          createTime: "2025-03-25 11:37:08",
          status: "待服务",
          totalPrice: 30000, // 单位为分
          products: [
            {
              id: 1,
              name: "服务产品1",
              num: 1,
              price: 15000, // 单位为分
              description: "服务产品描述...",
              imgUrl: "https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280"
            },
            {
              id: 2,
              name: "服务产品2",
              num: 1,
              price: 15000, // 单位为分
              description: "服务产品描述...",
              imgUrl: "https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280"
            }
          ]
        },
        {
          orderId: 3,
          name: "订单3",
          createTime: "2025-03-24 10:00:00",
          status: "已完成",
          totalPrice: 40000, // 单位为分
          products: [
            {
              id: 1,
              name: "已完成产品1",
              num: 1,
              price: 20000, // 单位为分
              description: "已完成产品描述...",
              imgUrl: "https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280"
            },
            {
              id: 2,
              name: "已完成产品2",
              num: 1,
              price: 20000, // 单位为分
              description: "已完成产品描述...",
              imgUrl: "https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280"
            }
          ]
        }
      ]
    };
  },
  computed: {
    pendingOrders() {
      return this.orderList.filter(order => order.status === "待付款");
    },
    serviceOrders() {
      return this.orderList.filter(order => order.status === "待服务");
    },
    completedOrders() {
      return this.orderList.filter(order => order.status === "已完成");
    }
  },
  methods: {
    // 可以在这里添加订单相关的逻辑
  }
};
</script>

<style scoped>
.empty-state {
  text-align: center;
  padding: 20px;
  color: #999;
}

.total-price {
  font-weight: bold;
  margin: 10px 0;
  text-align: right;
}
</style>